<template xmlns="http://www.w3.org/1999/html">
      <div class="ArticleFooter">

      <div class="profile">
        <a href="" style="width: 100%;display: flex;">
          <el-avatar :size="36" :src="this.$store.state.user.avatar" style="cursor: pointer;position: relative;right: 8px;" class="avatar"></el-avatar>
         <span style="font-weight: bold;font-size: large;padding-left: 10px; color: #000;width: 120px">{{$store.state.user.account}}</span>
          
        </a>
        <span v-show="isMe">
          <el-button round style="height: 20px;line-height: 4px;border: 1px solid black;" @click="follow">{{$store.state.isfollow}}</el-button>
        </span>
       
      </div>

      <div class="listitems">
        <div class="tools">
        <img src="@/assets/icon/点赞.svg"><span>0</span>
        <img src="@/assets/icon/star.svg" style="opacity: 0.7"> <span>0</span>
        <img src="@/assets/icon/评论.svg" style="opacity: 0.7"  @click="showDialg"> <span>{{commentCount}}</span>
        </div>
        <el-drawer
            title="评论"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose">
            <div class="diag-top">
              <div class="diag-top-img">
                <el-avatar :size="26" :src="avatar" style="cursor: pointer;" class="avatar"></el-avatar>
              </div>
              <div class="diag-top-comment">
                <textarea class="editcomment" placeholder="想对作者说什么" :maxlength="textmaxlength" v-model.trim="ArticleComments.commentContent">

                </textarea>
                <div class="editcomment-tools">
                     <div class="editcomment-tools-tip">
                       <span style="opacity: 0.5">还能输入</span>
                       <span>{{countText}}</span>
                       <span style="opacity: 0.5">个字符</span>
                     </div>
                  <div class="editcomment-tools-btn">
                     <button class="commentBtn" @click="sendComment">评论</button>
                  </div>
                </div>

              </div>

            </div>
           <div class="diag-comments" v-for="item in this.commentList" :key="item.commentId">
              <div class="diag-comment">
                <div class="diag-comment-img">
                  <el-avatar :size="26" :src="item.userAvatar" style="cursor: pointer;" class="avatar"></el-avatar>
                </div>
                <div class="diag-comment-content">
                  <div class="diag-comment-content-head">
                    <div class="diag-comment-content-head-left">
                      <div class="diag-comment-content-head-left-nickname">
                         <span>{{item.account}}</span>
                      </div>
                      <div class="diag-comment-content-head-timeleft">
                        {{countLeft(item.createTime)}}
                      </div>
                    </div>
                    <div class="diag-comment-content-head-right">
                       <img src="@/assets/icon/点赞.svg">
                    </div>
                  </div>
                  <div class="diag-comment-content-newcomment">
                         <span>{{item.commentContent}}</span>
                  </div>
                </div>
              </div>
           </div>
        </el-drawer>

      </div>
    </div>
</template>

<script>


import {comment, getcomment, getcommentCount} from "@/api/articlecomment";
import { Message } from 'element-ui';
import moment from "moment";
import {getFollow, toFollow} from "@/api/user";

export default {
     name:"ArticleFooter",
  data() {
    return {
      avatar: localStorage.getItem('avatar'),
      drawer: false,
      textmaxlength:1000,
      commentText:"",
      ArticleComments:{
        articleId:"",
        commentContent:"",

      },
      commentList:"",
      CountComment:"",
      followOrNot:""

    };
  },
  computed:{
       isMe(){
          return this.$store.state.user.account !== localStorage.getItem("nickname");
       },
    countText(){
         return this.textmaxlength-this.ArticleComments.commentContent.length;
    },
    commentCount(){
      getcommentCount(this.$store.state.article.articleId).then(res=>{
        this.CountComment=res;
      });
      return this.CountComment;
    },
  },
  methods: {
    follow(){
      toFollow(this.$store.state.article.userId).then(res=>{
        this.$store.commit("FOLLOW",res);
      })
    },
    showDialg(){
      this.drawer=true;
      this.$store.commit("SHOW",true)
      getcomment(this.$store.state.article.articleId).then(commentList=>{
         this.commentList=commentList;
      });

    },
    handleClose(done) {
            done();
      this.$store.commit("SHOW",false)
    },
    sendComment(){
      if(this.ArticleComments.commentContent!==""){
        this.ArticleComments.articleId=this.$store.state.article.articleId;
        comment(this.ArticleComments);
        getcomment(this.$store.state.article.articleId).then(commentList=>{
          this.commentList=commentList;
        });
      }else {
        Message.info("请先填写评论哦")
      }

    },

    countLeft(t2){
      moment.locale('zh-cn');
       return moment(t2).fromNow();
    }

  },
  watch:{
       //TODO
    // commentList(a1 ,a2){
    //     getcomment(this.$store.state.article.articleId).then(commentList=>{
    //       this.commentList=commentList;
    //     });
    //     return this.commentList;
    //
    // }
  },
}
</script>

<style>
*{
  box-sizing: border-box;
}
.ArticleFooter{
  margin-top: 60px;
  width: 100%;
  height: 30px;
  display: flex;
  margin-left: 15px;

}
.profile{
  flex-basis: 177px;
  display: flex;
}
.listitems{
  flex-grow: 1;
  display: flex;
  flex-direction: row-reverse;
}
.tools{
  flex-basis: 200px;
  display: flex;
  justify-content: space-around;
  margin-right: 20px;

}
.tools span{
  margin-left: 5px;
}
.tools img{
  cursor: pointer;
  margin-left: 15px;
  width: 24px;
  height: 24px;
}
.el-drawer{
  box-shadow: none;
  width: 500px;
}
.el-drawer__body{

}

.diag-top{
width: 100%;
height: 148px;
  display: flex;
}
.diag-top-img{
  width: fit-content;
  margin-left: 20px;
}
.diag-top-comment{
  flex-grow: 8;
  display: flex;
  flex-direction: column;

}
.editcomment-tools{
  width: 100%;
  height: 26px;
  display: flex;
  justify-content: space-between;
}
.editcomment-tools-tip{
  width: 130px;
  line-height: 26px;
  font-size: 12px;
  padding-left: 15px;
}
.editcomment-tools-btn{
  width: 136px;
  display: flex;
  justify-content: center;
}
.editcomment{
  width: 100%;
  flex-grow: 5;
  resize: none;
  padding: 7px 16px 0px 16px ;
  border: none;
  overflow-y: hidden;
}
.editcomment:focus{
  outline: none;
}
.commentBtn{
  border-radius: 2ch;
   width: 70px;
    background-color: #fd5531;
  color: white;
  border: none;
  cursor: pointer;
}
.diag-comments{
  display: flex;
  flex-direction: column;
}
.diag-comment{
  width: 100%;
  height: 78px;
  display: flex;
}
.diag-comment-img{
  width: 26px;
  margin-left: 20px;
  padding-top: 16px;
}
.diag-comment-content{
  display: flex;
  padding: 16px 0px 16px 0px;
width: 412px;
  flex-direction: column;
  height: fit-content;
}
.diag-comment-content-head{
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}
.diag-comment-content-head-left{
  width: 150px;
  display: flex;
  margin-left: 10px;
  font-size: 14px;
  opacity: 0.7;
  justify-content: space-between;
}
.diag-comment-content-head-right{
  width: 16px;
}
.diag-comment-content-newcomment{
  flex-grow: 1;
  padding-left: 10px;
  font-size: 14px;
}

</style>